<template>
  <div class="info_item">
    <el-card>
      <div class="title_view" @click="clickAllPublic" title="点击翻页">
        <div>
          <img src="@/assets/image/tit_icon1.png" alt="" />
          <span>{{title}}</span>
        </div>
        <img src="@/assets/image/back.png" alt="" />
      </div>

      <div class="list_view">
        <div style="cursor: pointer;" v-for="(item, index) in list" :key="index" @click="clickPublicDetail(item)">
          <span>{{item.title}}</span>
          <span>{{item.createTime}}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    listSubject
  } from "@/api/consultation/subject.js"
  import {
    listContent
  } from "@/api/consultation/content.js"
  export default {
    components: {},
    data() {
      return {
        subjectId: null,
        title:null,
        list: [],
        queryForm:{
          pageNum: 1,
          pageSize: 6,
        },
      }
    },
    props: {
      code: String,
    },
    created() {
      this.getCodeTitle();
    },
    computed: {},
    methods: {
      clickAllPublic() {
        if(list.length==this.queryForm.pageSize){
          this.queryForm.pageNum = this.queryForm.pageNum +1;
        }else if(list.length<this.queryForm.pageSize){
           this.queryForm.pageNum = 1;
        }
        this.getList();
      },
      clickPublicDetail(item) {
        this.$emit('detail', item);
      },
      getCodeTitle() {
        let query = {
          codeOpt: this.code,
          statusOpt:1,
        };
        if(this.code)
        listSubject(query).then(response => {
          if (response.data) {
            let result = response.data[0];
            this.title = result.subjectName;
            this.subjectId = result.subjectId;
            this.getList();
          }

        });
      },
      getList() {
        this.queryForm.subjectId = this.subjectId;
        if(this.subjectId)
        listContent(this.queryForm).then(response => {
          this.list = response.rows;
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  .info_item {
    width: 29rem;
    height: 23.125rem;
    margin-top: 0.94rem;
    margin-left: 0.94rem;
  }

  .el-card {
    width: 100%;
    height: 100%;
  }

  .title_view {
    height: 3rem;
    width: 100%;
    background: linear-gradient(35deg, rgb(183, 221, 250) 0%, rgb(122, 190, 246) 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    img {
      width: 0.625rem;
      height: 0.94rem;
      margin-right: 1rem;
    }

    div {
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        width: 1rem;
        height: 1rem;
        margin-left: 1rem;
        margin-right: 0;
      }

      span {
        font-size: 1.125rem;
        color: blueviolet;
        font-weight: 600;
        margin-left: 0.625rem;
      }
    }
  }

  .list_view {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
    height: 16.5rem;
    overflow: auto;

    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      width: 85%;

      span {
        font-size: 1rem;
        color: #666;
      }

      span:nth-child(1) {
        margin-right: 1.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>
